<template>
	<view class="wapper">
		<view class="form-con">
			<view class="item-list">
				<view class="name">
					<text class="red">
						*
					</text>
					申请部门
				</view>
				<view class="value" @click="showPicker">
					<text :class="form.deptName?'text':''"> {{form.deptName || '请选择'}}</text>
					<u-icon name="arrow-right" color="#b3b3b3" size="28rpx"></u-icon>
				</view>
			</view>


			<view class="item-list-none">
				<view class="name">
					<text class="red">
						*
					</text> 申请领用物资
				</view>
				<view class="value">
					<!-- <text>预计总费用 ¥{{totalPrice.toFixed(2)}}</text> -->
				</view>
			</view>
			<view class="table">
				<view class="list-list" v-if="materialInfoList && materialInfoList.length>0">
					<view class="list-item">
						<view class="item-index">序号</view>
						<view class="item-name">物资名称</view>
						<view class="item-content">领用数量</view>
						<view class="item-handle">操作</view>
					</view>
					<view class="list-item" v-for="(item, index) in materialInfoList" :key="index">
						<view class="item-index">{{index+1}}</view>
						<view class="item-name">{{item.materialName}}</view>
						<view class="item-content">
							<u--input type="number" placeholder="请输入数量" border="surround" v-model="item.quantity"
								@blur="onExchange(index, item)"></u--input>
						</view>
						<view class="item-handle">
							<u-icon name="minus-circle-fill" color="#ff654e" size="48rpx" @click="handleDelete(index)">
							</u-icon>
						</view>
						<view class="clearfix"></view>
					</view>
				</view>
			</view>
			<view class="add-project" @click="handleNew">
				<image src="../../static/image/detail/add-icon.png"></image>添加物资
			</view>

			<view class="item-list-none">
				<view class="name">
					<text class="red">
						*
					</text>
					领用原因
				</view>
			</view>
			<view class="text-area">
				<textarea v-model="form.reason" placeholder="请输入"></textarea>
			</view>
		</view>
		<view class="footer" @click="newSubmit">
			提交
		</view>

	<ba-tree-picker ref="treePicker"  :multiple='false' @select-change="selectChange" title="选择部门"
		:localdata="deptList" valueKey="id" :checkId="form.deptId" textKey="label" childrenKey="children"  />
		<u-modal :show="showConfirm" @cancel="showConfirm=false" @confirm="handleConfirmDelete" :showCancelButton="true"
			title="提示" content='是否确认删除?'></u-modal>
	</view>
</template>

<script>
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	import {
		getDeptList
	} from '@/api/common.js'

	import {
		addRequisition
	}
	from '@/api/requisition.js'
	export default {
		components: {
			baTreePicker
		},
		data() {
			return {
				deptList: [],
				materialInfoList: [],
				// 表单参数
				form: {
					deptName: '',
					inventoryType: 2,
					applyUserId: '',
					deptId: null,
					reason: '',
					materialList: []
				},
				projectList: [],
				totalPrice: 0,
				loading: false,
				deleteIndex: null,
				showConfirm: false,
				checkId: '',
				currentDeptList: [],
			}
		},
		created() {
			this.getDept()
			const userInfo = uni.getStorageSync('user_info')
			if (userInfo) {
				this.form.deptId = userInfo.user.dept.deptId
				this.form.deptName = userInfo.user.dept.deptName
				this.checkId = userInfo.user.dept.deptId
			}
		},
		methods: {
			changeId(id) {
				this.checkId = id
			},
			showPicker() {
				this.currentDeptList = []
				this.currentDeptList = [...this.deptList]
				this.$refs.treePicker._show();
			},
			onExchange(index, row) {
				let moment = this.materialInfoList[index] // 此处的mapActionList为自己的table表格绑定的data数组
				this.$set(this.materialInfoList, index, moment)
				const regQuantity = /^\d*\.{0,1}\d{0,1}$/
				if (!regQuantity.test(row.quantity)) {
					uni.showToast({
						icon: 'none',
						title: '请输入数字且保留1位小数',
						duration: 3000,
					})
					row.quantity = ''
					return
				}
			},

			//监听选择（ids为数组）
			selectChange(ids, names) {
				this.form.deptName = names
				this.form.deptId = ids[0]
				console.log(ids, names)
			},
			getDept() {
				getDeptList().then(response => {
					this.deptList = response.data

				})
			},
			changeProject(materialInfoList) {
				if (materialInfoList) {
					const materialInfoListArr = [...this.materialInfoList, ...materialInfoList]
					this.materialInfoList = this.deWeight(materialInfoListArr)
				}
			},

			deWeight(arr) {
				for (var i = 0; i < arr.length - 1; i++) {
					for (var j = i + 1; j < arr.length; j++) {
						if (arr[i].id == arr[j].id) {
							arr.splice(j, 1)
							//因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
							j--
						}
					}
				}
				return arr
			},

			handleDelete(index) {
				this.deleteIndex = index
				this.showConfirm = true
			},
			handleConfirmDelete() {
				const self = this
				self.materialInfoList.splice(self.deleteIndex, 1)
				this.showConfirm = false
			},

			getDetail() {
				const id = this.id
				getWorkOrderDetail({
					id
				}).then(response => {
					this.form = response.data
				})
			},
			handleNew() {
				uni.navigateTo({
					url: '/subMaintenance/addProject/index?filterType=1'
				})
			},

			/** 提交按钮 */
			newSubmit() {
				if (this.loading) {
					return
				}
				let materialList = []
				if (!this.form.deptId) {
					uni.showToast({
						icon: 'none',
						title: '请选择申请部门',
						duration: 3000,
					})
					return
				}
				if (this.materialInfoList.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请添加物资',
						duration: 3000,
					})
					return
				} else {

					for (let i = 0; i < this.materialInfoList.length; i++) {
						if (this.materialInfoList[i].quantity === '') {
							uni.showToast({
								icon: 'none',
								title: '请输入物资数量',
								duration: 3000,
							})
							return
						} else {
							const obj = {
								materialId: this.materialInfoList[i].id,
								quantity: this.materialInfoList[i].quantity
							}
							materialList.push(obj)
						}

					}

				}


				if (!this.form.reason) {
					uni.showToast({
						icon: 'none',
						title: '请输入领用原因',
						duration: 3000,
					})
					return
				}
				const params = {
					deptId: this.form.deptId,
					materialList: materialList,
					reason: this.form.reason
				}
				uni.showLoading({
					mask: true,
					title: '提交中'
				})
				this.loading = true
				addRequisition(params).then(response => {
					if (response.code === 200) {
						uni.showToast({
							icon: 'none',
							title: '保存成功',
							mask: true,
							duration: 2000,
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					} else {
						uni.hideLoading()
					}
				 
				}).finally(() => {
					this.loading = false
					uni.hideLoading()
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		min-height: 100vh;
		background: #F5F7F9;
		overflow: hidden;
		// padding-bottom: 104rpx;


		.form-con {
			margin-top: 10rpx;
			background: #fff;
			height: calc(100vh - 300 rpx);

			.item-list-none {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;

				.name {
					font-size: 32rpx;
					font-weight: 400;

					.red {
						color: #FF654E;
					}
				}

				.value {
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
					color: #b3b3b3;
					flex: 1;

					width: 400rpx;
					justify-content: flex-end;


					text {
						margin-right: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.text {
						color: #333;
					}
				}

			}

			.table {
				padding: 0 30rpx;

				.list-list {
					width: 100%;

					.list-item {
						padding: 10rpx 0;
						min-height: 60rpx;
						line-height: 60rpx;
						border-bottom: 1rpx solid #E3E7EE;

						.item-index {
							width: 100rpx;
							float: left;
							text-align: center;
						}

						.item-name,
						.item-content {
							float: left;
							width: calc((100% - 180rpx) / 2);
							height: auto;
							word-wrap: break-word;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

						}

						.item-content {
							/deep/ .u-border {
								border: 1rpx solid #F0F2F5;
								font-size: 24rpx;
								height: 36rpx;

							}
						}

						.item-handle {
							float: left;
							text-align: center;
							width: 80rpx;
							display: flex;
							justify-content: center;
							line-height: 80rpx;
							height: auto;

						}

						&:first-child {
							border-bottom: none !important;
							border-top: 1rpx solid #E3E7EE;
						}
					}


				}

			}

			.add-project {
				clear: both;
				padding: 26rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #3685E6;
				border-bottom: 2rpx solid #F5F7F9;

				image {
					width: 48rpx;
					height: 49rpx;
				}
			}

			.text-area {
				margin: 0 30rpx;

				textarea {
					width: 100%;
				}
			}

			.item-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				border-bottom: 2rpx solid #F5F7F9;

				.name {
					font-size: 32rpx;
					font-weight: 400;
					margin-right: 20rpx;

					.red {
						color: #FF654E;
					}
				}

				.value {
					font-size: 24rpx;
					font-weight: 400;
					display: flex;
					color: #b3b3b3;
					flex: 1;

					width: 400rpx;
					justify-content: flex-end;


					text {
						margin-right: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.text {
						color: #333;
					}
				}
			}
		}

		.footer {
			width: 686rpx;
			height: 104rpx;
			background: #407FFF;
			border-radius: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: fixed;
			// bottom: 118rpx;
			// left: 38rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin: 38rpx auto;

		}
	}
</style>
